<template>
  <view>
    <view v-for="item in productList" :key="item.skuId" class="integral-wrap">
      <view class="integral-img">
        <image :src="getIntegralSkuImg(item)" />
      </view>
      <view class="integral-details">
        <view class="integral-title">{{ item.skuName || '' }}</view>
        <view class="integral-code tips-color">商品编码：{{ item.skuId || '' }}</view>
        <view class="integral-num">
          <view class="integral-val">
            <text class="orange-color">{{ item.exchangeType == 0?item.needIntegral: item.needCoin }}</text>
            <text class="tips-color">{{ item.exchangeType == 0?'积分':'鑫币' }}</text>
          </view>
          <view class="tips-color">x1</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    productDetails: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    productList() {
      return [...this.productDetails]
    }
  },
  methods: {
    // 获取积分商品图片路径
    getIntegralSkuImg(skuInfo) {
      const pictureList = skuInfo?.pictureList ?? []
      const imgSrc = pictureList[0] ?? '/static/image/placeholder.png'
      return imgSrc
    }
  }
}
</script>
<style lang="scss" scoped>
.integral-wrap {
  display: flex;
  padding: 16rpx 24rpx 16rpx 16rpx;
  .integral-img {
    image {
      width: 176rpx;
      height: 176rpx;
    }
  }
  .integral-details {
    margin-left: 8rpx;
    .integral-title {
      width: 492rpx;
      color: $uni-text-color;
    }
    .integral-num {
      display: flex;
      justify-content: space-between;
    }
    .integral-val {
      text {
        font-size: 28rpx;
      }
    }
  }
  .integral-code, .integral-num {
    margin-top: 4rpx;
  }
}
.orange-color {
  color: $uni-orange;
}
.tips-color {
  color: $uni-text-color-tips;
}
</style>
